<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="分销级别">
				<el-select v-model="queryParams.distributionLevel" clearable>
					<el-option label="一级分销" value="1"></el-option>
					<el-option label="二级分销" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="佣金状态">
				<el-select v-model="queryParams.status" clearable>
					<el-option label="冻结中" value="1"></el-option>
					<el-option label="已解冻" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage"
					><el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery"
					><el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="userInfo" label="消费用户" show-overflow-tooltip>
				<template #default="scope">
					<el-link type="primary">{{ scope.row.userInfo.nickName }}({{ scope.row.userInfo.phone }})</el-link>
				</template>
			</el-table-column>
			<el-table-column prop="distributionUserInfo" label="分销用户" show-overflow-tooltip>
				<template #default="scope">
					<el-link type="primary">{{ scope.row.distributionUserInfo.nickName }}({{ scope.row.distributionUserInfo.phone }})</el-link>
				</template>
			</el-table-column>

			<el-table-column prop="totalAmount" label="佣金金额" />
			<el-table-column prop="distributionLevel" label="分销级别">
				<template #default="scope">
					{{ scope.row.distributionLevel == '1' ? '一级分销' : scope.row.distributionLevel == '2' ? '二级分销' : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="佣金状态">
				<template #default="scope">
					{{ scope.row.status == '1' ? '冻结中' : scope.row.status == '2' ? '已解冻' : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" />
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="page.total"
			v-model:currentPage="page.currentPage"
			v-model:pageSize="page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { getPage } from '/@/api/mall/distributionorder';
export default defineComponent({
	props: {
		userId: {
			type: String,
			default: () => '',
		},
	},
	setup(props) {
		const showSearch = ref(true);
		const loading = ref(false);
		const data = reactive({
			queryParams: {
				distributionLevel: '',
				status: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
			},
			tableData: [],
		});

		const initPage = async () => {
			loading.value = true;
			let params = {
				current: data.page.currentPage,
				size: data.page.pageSize,
				distributionUserId: props.userId ? props.userId : '',
			};
			await getPage(Object.assign(params, data.queryParams))
				.then((response) => {
					data.tableData = response.data.data.records;
					data.page.total = response.data.data.total;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 重置搜索表单
		 */
		const resetQuery = () => {
			data.queryParams = { distributionLevel: '', status: '' };
		};

		initPage();
		return {
			showSearch,
			loading,
			initPage,
			resetQuery,
			...toRefs(data),
		};
	},
});
</script>
